<template>
	<view class="vip">
		<view class="nav">
			<uni-nav-bar backgroundColor="transparent" left-icon="left" fixed @clickLeft="goback" color="#FFF"
				fixed></uni-nav-bar>
		</view>

		<view class="equity box">
			<view class="title">超值升级尊享4大权益</view>
			<view class="icon">
				<view class="item">
					<image src="/static/vip/vip_icon_1.png"></image>
					<text>专属活动</text>
				</view>
				<view class="item">
					<image src="/static/vip/vip_icon_2.png"></image>
					<text>每月赠券</text>
				</view>
				<view class="item">
					<image src="/static/vip/vip_icon_3.png"></image>
					<text>累计返券</text>
				</view>
				<view class="item">
					<image src="/static/vip/vip_icon_4.png"></image>
					<text>尊贵终身</text>
				</view>
			</view>
			<view class="text">{{Number(content.price).toFixed(0)}}<i>元</i>终身<i>使用</i></view>
			<view class="equity_btn" @click="toPay" v-if="!is_vip">立即升级</view>
		</view>

		<view class="coupon box">
			<view class="title">月月领券</view>
			<view class="text">每月8号和18号发放优惠券！</view>
			<view class="item" v-for="(item,index) in content.config" :key="index">
				<view class="left">
					<text>{{Number(item.reduction_price).toFixed(0)}}元优惠券</text>
					<view>{{item.name}}</view>
				</view>
				<view class="right">
					<view class="top">
						<text>X</text>
						<view>{{item.num}}</view>
						<text>张</text>
					</view>
					<view class="bottom">每月1张</view>
				</view>
			</view>
		</view>

		<view class="rich box">
			<view class="title">vip权益</view>
			<view class="block">
				<view v-html="content.content"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '这是说明',

				is_vip: 0,

				vipRuleList: [],
				iap: null,
				ids: ['maiyun298'],
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			toPay() {
				this.request.httpTokenRequest({
					url: "order/createVipOrder",
					method: "post"
				}, {}).then(res => {
					if (res.code == 0) {
						this.$util.toUrl(`/otherpages/pay/pay?order_id=${res.data.order_id}`)
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			payMent() {
				let that = this
				uni.requestPayment({
					provider: 'appleiap',
					orderInfo: {
						productid: this.ids[0],
						manualFinishTransaction: false,
					},
					success: (e) => {
						that.request.httpTokenRequest({
							url: "/pay/iosPay",
							method: "post"
						}, {
							apple_receipt: e.transactionReceipt
						}).then(res => {
							if (res.code == 0) {
								this.$util.modal(res.msg)
							} else {
								this.$util.msg(res.msg)
								return
							}
						}, error => {})

					},
					fail: (e) => {
						uni.hideLoading()
						this.$util.modal('支付失败')
					},
					complete: () => {
						uni.hideLoading()
						this.loading = false;
					}
				})
			},
			getDetail() {
				this.request.httpTokenRequest({
					url: "user/vipDetail",
					method: "post"
				}, {}).then(res => {
					if (res.code == 0) {
						this.content = res.data
						this.content.content = this.formatRichText(res.data.content)
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});

				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					`<img style='max-width:100%;height:auto;'`);

				var stylePattern = /style="[^=>]*"[\s+\w+=|>]/g;
				return newContent;
			},

			requestOrder() {
				uni.showLoading({
					title: '支付环境检测中......'
				})
				this.vipRuleList = []
				this.iap.requestOrder(this.ids, res => {
						uni.hideLoading()
						this.vipRuleList = res
						this.btnFlag = true
						uni.hideLoading()
					},
					(errormsg) => {
						plus.nativeUI.alert("获取应用内购项目失败，请稍后重试。", function(e) {}, "提示");
						uni.hideLoading()
					}
				)
			},
			getChannels() {
				let that = this
				plus.payment.getChannels(res => {
					let channel = res.find(i => i.id === 'appleiap')
					that.iap = channel ? channel : null
					// 这一步是获取支付参数列表,也就是你苹果后台申请的商品列表 requestOrder
					that.requestOrder()
				}, function(e) {
					plus.nativeUI.alert("获取支付通道失败，请稍后重试。", function() {}, "提示");
				})
			},
			requestPayment() {
				uni.showLoading({
					title: '支付中...'
				})
				let that = this
				//检测是否有未关闭订单 或者 未支付的订单 若有 关闭订单
				that.iap.restoreCompletedTransactions({
					manualFinishTransaction: true,
					username: ''
				}, (res) => {
					if (res.length > 0) {
						that.iap.finishTransaction(res[0], (reslut) => {
							this.payMent()
						})
					} else {
						this.payMent()
					}
				}, (err) => {
					// console.log(err);
				})

			},
		},
		onLoad() {
			this.is_vip = uni.getStorageSync('user').is_vip
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	#poa {
		position: fixed;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.box {
		box-sizing: border-box;
		width: 690rpx;
		background: linear-gradient(180deg, #322E2D 0%, #1F2020 100%);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.vip {
		min-height: 100vh;
		background: url('https://qiniu-cdn.maeiyun.com/imgs/mine/vip_bg_new.png') 0 0 no-repeat;
		background-size: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		// padding-bottom: 80rpx;
		background-color: #000;
	}

	.nav {
		padding-top: var(--status-bar-height);
	}

	.equity {
		padding: 50rpx 42rpx;
		margin-top: 1000rpx;

		.title {
			font-size: 44rpx;
			font-weight: 600;
			color: #F5C583;
			line-height: 62rpx;
			text-align: center;
			margin-bottom: 64rpx;
		}

		.icon {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					width: 103rpx;
					height: 119rpx;
				}

				text {
					font-size: 26rpx;
					color: #F5C583;
					line-height: 37rpx;
					margin-top: 20rpx;
				}
			}
		}

		.text {
			font-size: 66rpx;
			font-weight: 600;
			color: #F5C583;
			line-height: 92rpx;
			text-align: center;
			margin-top: 87rpx;

			i {
				font-size: 46rpx;
				font-style: normal;
				margin-right: 5rpx;
			}
		}

		.equity_btn {
			background: linear-gradient(180deg, rgba(240, 227, 196, 1.000000) 0, rgba(251, 185, 97, 1.000000) 100.000000%);
			border-radius: 50rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			width: 605rpx;
			font-size: 46rpx;
			font-weight: 600;
			color: #0A0A0A;
			line-height: 100rpx;
			text-align: center;
			margin-top: 56rpx;
		}

	}

	.coupon {
		padding: 50rpx 30rpx 50rpx;

		.title {
			font-size: 44rpx;
			font-weight: 600;
			color: #F5C583;
			line-height: 62rpx;
			text-align: center;
		}

		.text {
			font-size: 24rpx;
			color: #F5C583;
			line-height: 33rpx;
			margin: 12rpx 0 0;
			text-align: center;
		}

		.item {
			background: url(https://qiniu-cdn.maeiyun.com/imgs/mine/vip_coupon_bg.png) 0 0 no-repeat;
			background-size: 100%;
			width: 628rpx;
			height: 174rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 36rpx 24rpx 0 47rpx;
			box-sizing: border-box;
			margin-top: 41rpx;

			.left {
				text {
					font-size: 33rpx;
					font-weight: 600;
					color: #0A0A0A;
					line-height: 46rpx;
				}

				view {
					font-size: 28rpx;
					color: #0A0A0A;
					line-height: 46rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				flex-direction: column;

				.top {
					display: flex;
					align-items: flex-end;

					text {
						font-size: 26rpx;
						color: #3E392C;
					}

					view {
						font-size: 60rpx;
						font-weight: 600;
						color: #3E392C;
					}
				}

				.bottom {
					margin-top: 7rpx;
					width: 120rpx;
					height: 42rpx;
					background: #A46412;
					border-radius: 21rpx;
					border: 4rpx solid #DBA762;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #FFEDBF;
					line-height: 42rpx;
					text-align: center;
				}
			}
		}
	}

	.rich {
		padding: 30rpx;

		.title {
			font-size: 44rpx;
			color: #FEF3E1;
			line-height: 62rpx;
		}

		.block {
			width: 628rpx;
			padding: 30rpx;
			margin-top: 19rpx;
			box-sizing: border-box;
			background: #131313;
			border-radius: 20rpx;
		}
	}

	.btn {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/mine/vip_btn_bg.png) 0 0 no-repeat;
		background-size: 100%;
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 75rpx 0 69rpx;
		box-sizing: border-box;

		.left {
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			line-height: 42rpx;
		}

		.right {
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: 600;
				color: #FCEFD6;
				line-height: 42rpx;
			}
		}
	}
</style>